<template>
  <div class="sf-list-detail">
    <div
      class="sf-list-item"
      :style="{ width: widthNumFun }"
      v-for="(item, index) in list"
      :key="'place' + index"
    >
      <!-- 名称 -->
      <div class="num-set" :style="{ width: titWidth + 'px' }">
        <div class="num-icon" :class="'num-icon-' + (index + 1)">
          {{ index + 1 }}
        </div>
        <div style="line-height: 19px">{{ item.place }}</div>
      </div>
      <!-- 柱形 -->
      <div class="line" :style="{ width: widthNum + 'px' }">
        <div
          class="line-item"
          :class="'line-item' + (index + 1)"
          :style="{ width: (item.value / barMax) * widthNum + 'px' }"
        >
          {{ item.num }}{{ item.unit }}
        </div>
      </div>
      <!-- 百分比 -->
      <div class="radio">
        {{ item.radio }}%
        <img :src="item.src" class="arrawtransform" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: [],
    widthNum: {},
    // barMax: {
    //   default: 100,
    // },
    titWidth: {
      default: 56,
    },
  },
  computed: {
    barMax() {
      return this.list[0].num;
    },
    widthNumFun() {
      if (this.widthNum == 315) {
        return "100%";
      }
    },
  },
  data() {
    return {};
  },
  components: {},
  mounted() {},
  beforeDestroy() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/qjzl.scss";
.sf-list-detail {
  flex: auto;
}
.sf-list-item {
  width: 330px;
  display: flex;
  white-space: nowrap;
  box-sizing: border-box;
  padding-left: 14px;
  align-items: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 27px;
  .num-set {
    display: flex;
    flex-shrink: 0;
  }
  .num-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba($color: #ffff, $alpha: 0.8);
    line-height: 45px;
    background: url(../../assets/img/Union@1x-15.png);
    background-size: 100% 100%;
    background-origin: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 4px;
  }
  .num-icon-2 {
    background: url(../../assets/img/Union@1x-16.png);
    background-size: 100% 100%;
  }
  .num-icon-3 {
    background: url(../../assets/img/Union@1x-17.png);
    background-size: 100% 100%;
  }
  .num-icon-4 {
    background: url(../../assets/img/Union@1x-18.png);
    background-size: 100% 100%;
  }
  .num-icon-5 {
    background: url(../../assets/img/Union@1x-19.png);
    background-size: 100% 100%;
  }
  .line {
    width: 180px;
    border-radius: 11px;
    background: #123f82;
    height: 16px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    text-align: right;
    margin-right: 5px;
    margin-left: 5px;
    flex-shrink: 0;
    .line-item {
      height: 16px;
      box-sizing: border-box;
      background: linear-gradient(90deg, #4992ff, #38d9f4);
      border-radius: 11px;
      padding-left: 14px;
      padding-right: 5px;
      margin-right: 7px;
      line-height: 16px;
    }
    .line-item1 {
      background: linear-gradient(90deg, #524175, #ca465e);
    }
    .line-item2 {
      background: linear-gradient(90deg, #546662, #d4ba32);
    }
    .line-item3 {
      background: linear-gradient(90deg, #2571a2, #42c7de);
    }
    .line-item4 {
      background: linear-gradient(90deg, #0c6f75, #04c375);
    }
    .line-item5 {
      background: linear-gradient(90deg, #584448, #c25d00);
    }
  }
  .radio {
    font-size: 12px;
    // font-family: Source Han Sans CN;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    img {
      width: 7px;
      height: 11px;
    }
  }
}
</style>
